<script setup>
import { SERVE_URL, imgSERVEURL } from '@utils/config';
import dayjs from 'dayjs';
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import Type from '@components/search/type';
import Search from '@components/search/index';
import PageWrapper from '@components/PageWrapper.vue';
import { common, service } from '@utils';
import { useRoute } from 'vue-router';
import store from '@store';
import { Plus } from '@element-plus/icons-vue';
import { usePremission, useRole } from '@hooks';
import Detail from './Detail';
import RiskControl from './RiskControl';
import NewRiskControl from './newRiskControl';
import Deliver from './Deliver';
import money from './money';
import AddressCom from './Address';
import Settle from './Settle';
import deductDep from './deductDep';
import deductionAmount from './deductionAmount';
import dailyRcordMod from './dailyRcord';
const route = useRoute();
const user = store.getters.user;
const premission = usePremission({
    export: 'bfqz:order:export',
    view: 'order:detail', //详情
    edit: 'bfqz:order:save',
    check: 'order:audit', //审核通过
    deliver: 'order:delivery', //确认发货
    cancel: 'order:cancelOrder', //审核未通过/取消订单
    confirm: 'order:confirmSettle', //确认还款
    companycode: 'bfqz:order:companycode',
    wuliu: 'logistics:info:getLogisticsNode', //查看物流
    deduct: 'order:deduct', //申请扣除押金
    oldAttachment: 'risk:oldAttachment', //风控查询
    getRisk: 'risk:newAttachment', //新风控查询
    deposit: 'order:reduceDeposit', //减免押金
    orderover: 'order:reduceOver', //减免滞纳金
    modifyAddress: 'order:modifyAddress', //修改收货地址
    freezeDeposit: 'order:freezeDeposit', //解冻押金
    modifyLogistic: 'order:modifyLogistic', //修改订单物流
    payDetail: 'order:payDetail', //支付明细
    rentDetail: 'order:rentDetail', //还租详情
});
const confirmRepaymentReactive = reactive({
  dialogShow: false,
  from: {},
  list: [],
  ridioNum: '1',
  info: {},
});
let queryForm = reactive({
    time: [],
    placeTime: [],
    sentTime: [],
    state: '14',
    timeLimit: '',
});
const setTime = () => {
    let date = new Date();
    let end = date.getTime();
    date.setDate(1);
    let start = date.getTime();
    end = dayjs(end).format('YYYY-MM-DD 23:59:59');
    start = dayjs(start).format('YYYY-MM-DD 00:00:00');
    queryForm.placeTime = [start, end];
    return (queryForm.placeStartTime = queryForm.placeTime[0]), (queryForm.placeEndTime = queryForm.placeTime[1]);
};
setTime();
const updateSearchRefKey = ref(new Date().getTime());
const moneyData = ref({});
const pageRef = ref();
const tableRef = ref();
const detailRef = ref();
const riskRef = ref();
const newRiskRef = ref();
const deliverRef = ref();
const moneyRef = ref();
const addressRef = ref();
const settleRef = ref();
const deductDepRef = ref();
const deductionAmountRef = ref();
const expressMethods = ref([]);
const expressCompanys = ref([]);
const yesNo = ref([]);
const closeCauseList = ref();
const newStatussList = ref();
const dailyRcordRef = ref();
const stateOrder = ref(route.query.orderId ? '' : '14');
const suggestionsList = ref();
const searchRef = ref();
const newOrOldData = ref([])
let visible = reactive({
    show: false,
});
let searchs = reactive([
    {
        type: Type.DATE_RANGE,
        width: 6,
        key: 'time',
        endPlaceholder: '租期结束时间',
        startPlaceholder: '租期开始时间',
    },
    {
        type: Type.DATE_RANGE,
        width: 6,
        key: 'placeTime',
        default: route.query.orderId ? [] : queryForm.placeTime,
        endPlaceholder: '下单结束时间',
        startPlaceholder: '下单开始时间',
    },
    {
        type: Type.DATE_RANGE,
        width: 6,
        key: 'sentTime',
        endPlaceholder: '发货结束时间',
        startPlaceholder: '发货开始时间',
    },
    {
        type: Type.INPUT,
        key: 'orderId',
        width: 3,
        default: route.query.orderId || '',
        placeholder: '订单号',
    },
    {
        type: Type.INPUT,
        key: 'goodsName',
        width: 3,
        placeholder: '商品名称',
    },
    {
        type: Type.SELECT,
        key: 'leaseMethod',
        width: 3,
        placeholder: '产品类型',
        valueKey: 'value',
        data: [],
    },
    {
        type: Type.SELECT,
        key: 'companyCode',
        width: 3,
        default: route.query.companyCode || '',
        valueKey: 'companyCode',
        placeholder: '商家名称',
    },
    {
        type: Type.INPUT,
        key: 'receiverName',
        width: 3,
        placeholder: '用户',
    },
    {
        type: Type.INPUT,
        key: 'receiverPhone',
        width: 3,
        placeholder: '用户联系方式',
    },
    {
        type: Type.SELECT,
        key: 'channelCode',
        width: 3,
        placeholder: '渠道来源',
        valueKey: 'channelCode',
        labelKey: 'channelName',
        data: suggestionsList,
    },
    {
        type: Type.SELECT,
        key: 'contractState',
        width: 0,
        placeholder: '是否签署协议',
        visible: false,
        data: [
            {
                value: 1,
                label: '是',
            },
            {
                value: 0,
                label: '否',
            },
        ],
    },
    {
        type: Type.SELECT,
        key: 'state',
        width: 0,
        placeholder: '取消原因',
        visible: false,
        valueKey: 'value',
        data: closeCauseList,
    },
    {
        type: Type.SELECT,
        key: 'timeLimit',
        width: 0,
        placeholder: '即将到期',
        visible: false,
        data: [
            {
                value: 1,
                label: '当日到期',
            },
            {
                value: 3,
                label: '3天内到期',
            },
            {
                value: 7,
                label: '7天内到期',
            },
        ],
    },
    {
        width: 6,
        type: Type.SEARCH_EXPORT_BUTTON,
    },
]);
if (user.enterpriseType) {
    searchs.splice(6, 1);
}

let titleList = reactive([
    {
        name: '序号',
        width: '74px',
    },
    {
        name: '商品信息',
        width: '210px',
    },
    {
        name: '租赁信息',
        width: '272px',
    },
    {
        name: '押金信息',
        width: '280px',
    },
    {
        name: '支付信息',
        width: '190px',
    },
    {
        name: '用户信息',
        width: '240px',
    },
    {
        name: '订单状态/订单类别',
        width: '150px',
    },
    // {
    //     name: '逾期信息',
    //     width: '240px'
    // },
    {
        name: '操作',
        width: '128px',
    },
]);
const numLine = ref(1);
const onLineNum = num => {
    numLine.value = num;
};
const handleClick = tab => {
    const query = { ...queryForm };
    searchs[3].default = '';
    // searchs[0].default = [queryForm.rentStartTime, queryForm.rentEndTime];
    searchs[1].default = [queryForm.placeStartTime, queryForm.placeEndTime];
    // searchs[2].default = [queryForm.sentStartTime, queryForm.sentEndTime];
    // searchs[3].default = queryForm.orderId;
    // searchs[4].default = queryForm.goodsName;
    // searchs[5].default = queryForm.leaseMethod;
    // searchs[6].default = queryForm.companyCode;
    // searchs[7].default = queryForm.receiverName;
    // searchs[8].default = queryForm.receiverPhone;
    // searchs[9].default = queryForm.channelCode;
    if (query.time && query.time.length > 0) {
        query.rentStartTime = query.time[0];
        query.rentEndTime = query.time[1];
        delete query.time;
    }
    if (query.placeTime && query.placeTime.length > 0) {
        query.placeStartTime = query.placeTime[0];
        query.placeEndTime = query.placeTime[1];
        delete query.placeTime;
    }
    if (query.sentTime && query.sentTime.length > 0) {
        query.sentStartTime = query.sentTime[0];
        query.sentEndTime = query.sentTime[1];
        delete query.sentTime;
    }
    searchs.map(item => {
        if (tab == '7' && item.key == 'contractState' && item.visible == false) {
            item.visible = true;
            item.width = 3;
        } else if (item.key == 'contractState') {
            item.width = 0;
            item.visible = false;
            delete query.contractState;
        } else {
            return;
        }
    });
    searchs.map(item => {
        if (tab == '3' && item.key == 'state' && item.visible == false) {
            item.width = 3;
            item.visible = true;
        } else if (item.key == 'state') {
            item.width = 0;
            item.visible = false;
            // delete query.state;
        } else {
            return;
        }
    });
    searchs.map(item => {
        if (tab == '9' && item.key == 'timeLimit' && item.visible == false) {
            item.visible = true;
            query.timeLimit = '';
            item.width = 3;
        } else if (item.key == 'timeLimit') {
            item.width = 0;
            item.visible = false;
            delete query.timeLimit;
        } else {
            return;
        }
    });
    updateSearchRefKey.value = new Date().getTime();
    searchRef.value.reset();
    // onSearch(query);
};
const onSearch = param => {
    const query = { ...param };
    if (query.time && query.time.length > 0) {
        query.rentStartTime = query.time[0];
        query.rentEndTime = query.time[1];
        delete query.time;
    }
    if (query.placeTime && query.placeTime.length > 0) {
        query.placeStartTime = query.placeTime[0];
        query.placeEndTime = query.placeTime[1];
        delete query.placeTime;
    }
    if (query.sentTime && query.sentTime.length > 0) {
        query.sentStartTime = query.sentTime[0];
        query.sentEndTime = query.sentTime[1];
        delete query.sentTime;
    }
    let queryTwo = JSON.parse(JSON.stringify(query));
    queryForm = { ...queryTwo };

    if (stateOrder.value == undefined) {
        queryForm.state = '14';
    } else if (stateOrder.value == '3') {
        queryForm.orderExtState = 30;
        let closeCauseNum = [];
        closeCauseList.value.forEach(item => {
            closeCauseNum.push(item.value);
        });
        if (!closeCauseNum.includes(queryForm.state)) {
            delete queryForm.state;
        } else {
            delete queryForm.orderExtState;
        }
    } else if (stateOrder.value == '12') {
        queryForm.orderExtState = 40;
        delete queryForm.state;
    } else {
        queryForm.state = stateOrder.value;
    }
    pageRef.value.refresh();
};
const routerOrderIdOne = ref(0);
const getData = async ({ pageNum, pageSize }, cb) => {
    const query = { ...queryForm };

    if (route.query.orderId && routerOrderIdOne.value == 0) {
        query.placeStartTime = '';
        query.placeEndTime = '';
        query.id = route.query.orderId;
        query.state = '';
        routerOrderIdOne.value = 1;
        const res = await service.bfqz.orders(pageNum, pageSize, query);
        cb(res);
    } else {
        if (query.time && query.time.length > 0) {
            query.rentStartTime = query.time[0];
            query.rentEndTime = query.time[1];
            delete query.time;
        }
        if (query.placeTime && query.placeTime.length > 0) {
            query.placeStartTime = query.placeTime[0];
            query.placeEndTime = query.placeTime[1];
            delete query.placeTime;
        }
        if (query.sentTime && query.sentTime.length > 0) {
            query.sentStartTime = query.sentTime[0];
            query.sentEndTime = query.sentTime[1];
            delete query.sentTime;
        }

        const res = await service.bfqz.orders(pageNum, pageSize, query);
        cb(res);
    }
};

const getStatuss = async () => {
    const res = await service.auth.sysdirectListbyCode({ code: 'newOrOld,orderState,fastMail,fastMailCompany,sonOrderState,yesNo,newOrderState,productType,closeCause' });
    if (res) {
        let newStatuss = [];
        let statuss = [];
        let sonStatuss = [];
        let productType = [];
        let closeCause = [];
        let newOrOldList = [];
        res.forEach(item => {
            switch (item.typeCode) {
                case 'newOrOld':
                    newOrOldList.push(item);
                    break;
                case 'orderState':
                    statuss.push(item);
                    break;
                case 'newOrderState':
                    newStatuss.push(item);
                    break;
                case 'sonOrderState':
                    sonStatuss.push(item);
                    break;
                case 'fastMail':
                    expressMethods.value.push(item);
                    break;
                case 'fastMailCompany':
                    expressCompanys.value.push(item);
                    break;
                case 'productType':
                    productType.push(item);
                    break;
                case 'yesNo':
                    if (item.value == 'true') {
                        item.value = true;
                    } else {
                        item.value = false;
                    }
                    yesNo.value.push(item);
                    break;
                case 'closeCause':
                    closeCause.push(item);
                default:
                    break;
            }
        });

        newStatuss.unshift({
            label: '全部',
            value: '',
        });
        searchs[5].data = productType;
        newStatussList.value = newStatuss;
        searchs[3].oldData = statuss;
        searchs[3].sonStatuss = sonStatuss;
        closeCauseList.value = closeCause;
        newOrOldData.value = newOrOldList;
    }
    const company = await service.auth.companyAll();
    searchs[6].data = company;
    const channelName = await service.channelConfigApi.channelConfigChanneName({});
    suggestionsList.value = channelName.data;
};

const exportData = async () => {
    const query = { ...queryForm };
    if (route.query.orderId && routerOrderIdOne.value == 0) {
        query.placeStartTime = '';
        query.placeEndTime = '';
        query.id = route.query.orderId;
        query.state = '';
        routerOrderIdOne.value = 1;
    } else {
        if (query.time && query.time.length > 0) {
            query.rentStartTime = query.time[0];
            query.rentEndTime = query.time[1];
            delete query.time;
        }
        if (query.placeTime && query.placeTime.length > 0) {
            query.placeStartTime = query.placeTime[0];
            query.placeEndTime = query.placeTime[1];
            delete query.placeTime;
        }
        if (query.sentTime && query.sentTime.length > 0) {
            query.sentStartTime = query.sentTime[0];
            query.sentEndTime = query.sentTime[1];
            delete query.sentTime;
        }
    }
    query.fileName = '订单信息.xlsx';
    const res = await service.bfqz.orderExport(query);
    res && common.export(res, query.fileName);
};

const showRisk = async row => {
    const res = await service.auth.companysByreally();
    if (res) {
        moneyData.value = res;
        visible.show = true;
        visible.row = row;
    }
};

const oldShowRisk = async row => {
    // visible.show = true
    visible.row = row;
    const { userId, userPhone } = row;
    const res = await service.bfqz.riskControl({ userId, userPhone });
    if (res) {
        let result = {};
        if (res.resp_code == 'SW0000') {
            result = res.resp_data;
            result.isOK = true;
        } else {
            result.isOK = false;
            result.result = '风控查询失败';
            result.reason = res.resp_msg;
        }
        riskRef.value.open(result);
    }
};

const checkOrder = async (row, state, msg) => {
    ElMessageBox.confirm('确认是否' + msg, '提示', {
        type: 'warning',
    }).then(async () => {
        let param = { orderId: row.orderId, state };
        const res = await service.bfqz.orderAudit(param);
        if (res) {
            ElMessage.success('审核通过，订单进入待发货');
            pageRef.value.refresh(true);
        }
    });
};

// const confirmRepayment = async row => {
//     ElMessageBox.confirm('是否确认还款', '提示', {
//         type: 'warning',
//     }).then(async () => {
//         let param = { orderId: row.orderId };
//         const res = await service.bfqz.orderConfirmSettle(param);
//         if (res) {
//             ElMessage.success('确认还款成功');
//             pageRef.value.refresh(true);
//         }
//     });
// };

const confirmRepayment = async (row) => {
  confirmRepaymentReactive.dialogShow = true
  confirmRepaymentReactive.info = row
  const res = await service.bfqz.rentDetail({ orderId: row.orderId })
  let list = []
  res.rentOrderStageVoList.forEach((item) => {
    if (item.state == 'waitPay' || item.state == 'outOfDate') {
      list.push(item)
    }
  })
  confirmRepaymentReactive.list = list
  if (list.length > 0) {
    confirmRepaymentReactive.from.orderId = row.orderId
    confirmRepaymentReactive.from.orderStageId = list[0].orderStageId
  } else {
    confirmRepaymentReactive.ridioNum = '2'
  }
};

const confirmRepaymentSubmit = async () => {
  console.log(confirmRepaymentReactive.from.amount)
  if (
      confirmRepaymentReactive.ridioNum == 1 &&
      !confirmRepaymentReactive.from.amount
  ) {
    ElMessage.error('请输入还款金额')
    return
  }
  ElMessageBox.confirm('是否确认还款', '提示', {
    type: 'warning',
  }).then(async () => {
    let param
    if (confirmRepaymentReactive.ridioNum == 1) {
      param = confirmRepaymentReactive.from
    } else {
      param = { orderId: confirmRepaymentReactive.from.orderId }
    }
    const res = await service.bfqz.orderConfirmSettle(param)
    if (res) {
      ElMessage.success('确认还款成功')
      confirmRepaymentReactive.dialogShow = false
      pageRef.value.refresh(true)
    }
  })
};

const finishRow = async row => {
    ElMessageBox.confirm('是否完结订单', '提示', {
        type: 'warning',
    }).then(async () => {
        let param = { orderId: row.orderId };
        const res = await service.bfqz.orderConfirmSettle(param);
        if (res) {
            ElMessage.success('完结订单成功');
            pageRef.value.refresh(true);
        }
    });
};

const cancelRow = (row, type) => {
    ElMessageBox.confirm(type == 1 ? '该操作将会为用户进行退款，确定继续吗？' : '确认是否审核不通过', '提示', {
        type: 'warning',
    }).then(async () => {
        let param = {
            cancelCode: type == 1 ? 'BUSINESS_CANCEL' : 'UN_PASS',
            orderId: row.orderId,
            reason: '取消订单',
        };
        const res = await service.bfqz.cancelOrderNew(param);
        if (res) {
            if (type == 1) {
                ElMessage.success('取消成功');
            } else {
                ElMessage.success('审核不通过，取消成功');
            }
            pageRef.value.refresh(true);
        }
    });
};

// const goTrue = row => {
//     service.bfqz.orderDetailDelivery({ orderId: row.id }).then(res => {
//         if (res) {
//             ElMessage.success('查询成功');
//             res = encodeURI(JSON.stringify(res));
//             window.open('https://www.txz1688.com/table.html?res' + res, '_blank');
//         }
//     });
// };

const confirmEvent = async type => {
    const { userId, orderId, userPhone } = visible.row;
    const { companyCode } = store.state.business.user;
    let result = {};

    if (type == 1) {
        const flag = await service.bfqz.riskAccountCheck({
            companyCode: companyCode,
            riskType: '1',
        });
        if (flag.code == 3001) {
            // ElMessage.error(flag.message || '报告查询失败');
            return;
        }
        const res = await service.bfqz.newRiskControl({ userId, phone: userPhone });
        if (res.resultCode == '8200' && typeof res.data != 'string') {
            const res2 = await service.bfqz.newRiskControl2({ userId, phone: userPhone });
            if (typeof res2.data != 'string' && res2.resultCode == '8200') {
                const res3 = await service.bfqz.riskAccountPay({
                    orderId: orderId,
                    companyCode: companyCode,
                    riskType: '1',
                });
                if (res3.resultCode == 8200) {
                    result.title = '视成报告';
                    result.data = res.data;
                    result.data2 = res2.data;
                    result.isOK = true;
                    result.type = type;
                    result.reason = res3.data;
                    ElMessage.success(res3.data);
                } else {
                    // ElMessage.error(res3.message || '视成报告查询失败');
                    // visible.show = true
                    // result.isOK = false
                    // result.result = '风控查询失败'
                    // result.reason = res3.message || ''
                    return;
                }
            } else {
                // ElMessage.error(res.message || res.data || '视成报告查询失败');
                // result.isOK = false
                // result.result = '风控查询失败'
                // result.reason = res.message || ''
                return;
            }
        } else {
            // ElMessage.error(res.message || res.data || '视成报告查询失败');
            return;
        }
    } else if (type == 2) {
        const flag = await service.bfqz.riskAccountCheck({
            companyCode: companyCode,
            riskType: '2',
        });
        if (flag.resultCode == 3001) {
            // ElMessage.error(flag.message || '报告查询失败');
            return;
        }
        const res = await service.bfqz.newRiskControl3({ userId, phone: userPhone });
        if (res.resultCode == 8200 && typeof res.data != 'string') {
            const res3 = await service.bfqz.riskAccountPay({
                orderId: orderId,
                companyCode: companyCode,
                riskType: '2',
            });
            if (res3.resultCode == 8200) {
                result.title = '全景雷达';
                result.data = res.data.idCard ? res.data : JSON.parse(res.data.result);
                result.isOK = true;
                result.type = type;
                result.reason = res3.data;
                ElMessage.success(res3.data);
            } else {
                // ElMessage.error(res.message || '全景雷达查询失败');
                // visible.show = true
                // result.isOK = false
                // result.result = '风控查询失败'
                // result.reason = res3.message || ''
                return;
            }
        } else {
            // ElMessage.error(res.message || res.data || '全景雷达查询失败');
            // result.isOK = false
            // result.result = '风控查询失败'
            // result.reason = res.message || ''
            return;
        }
    } else if (type == 3) {
        result.title = '探针';
    }
    setTimeout(() => {
        newRiskRef.value.open(result);
    }, 500);
};
const refundOfRent = row => {
    service.bfqz.depRefund({ orderId: row.orderId }).then(res => {
        if (res.resultCode == 8200) {
            ElMessage.success(`成功退还押金`);
            pageRef.value.refresh(true);
        } else {
            ElMessage.error(res.message || '退还押金失败');
        }
    });
};
const zfbThaw = row => {
    service.bfqz.zfbUnfreeze({ orderId: row.orderId }).then(res => {
        if (res.resultCode == 8200) {
            ElMessage.success('解冻成功');
            pageRef.value.refresh(true);
        } else {
            ElMessage.error(res.message || '解冻失败');
        }
    });
};
getStatuss();
const width = (function (premission) {
    let width = 24;
    premission.view && (width += 33 * 2);
    premission.check && (width += 33 * 2);
    premission.deliver && (width += 33 * 2);
    premission.cancel && (width += 33);
    premission.edit && (width += 33 * 2);
    premission.confirm && (width += 33);
    if (premission.check && premission.deliver) {
        width -= 33;
    }
    if (premission.edit && (premission.check || premission.deliver)) {
        width -= 33 * 2;
    }
    return Math.max(width, 72);
})(premission);
</script>
<template>
    <section class="main-white">
        <el-tabs v-model="stateOrder" @tab-change="handleClick">
            <el-tab-pane v-for="(item, index) in newStatussList" :key="index" :label="item.label" :name="item.value" />
        </el-tabs>
        <search ref="searchRef" class="search-box" :items="searchs" @filter="onSearch" @onLineNum="onLineNum" @export="exportData" :on-load="true" :key="updateSearchRefKey" />
        <div class="margin-bottom10" v-if="premission.add">
            <el-button type="primary" :icon="Plus" @click="showEdit()">添加</el-button>
        </div>
        <page-wrapper @get-data="getData" ref="pageRef" :on-load="false" style="flex: 1; overflow: hidden; display: flex; flex-direction: column">
            <template v-slot:default="props">
                <div class="listBody">
                    <div class="table-title">
                        <div class="table-title-item" :style="{ width: item.width }" v-for="(item, index) in titleList" :key="index">
                            {{ item.name }}
                        </div>
                    </div>
                    <div class="table-main">
                        <div class="table-body" v-for="(item, index) in props.tableData.records" :key="index">
                            <div class="table-body-item" style="text-align: left">
                                <div class="table-body-item-col" style="width: 74px; border: none">
                                    {{ index + 1 }}
                                </div>
                                <div class="table-body-item-col" style="width: 210px">
                                    <img :src="`${imgSERVEURL}${item.cover}`" alt="" />
                                    <span>
                                        {{ item.goodsName }}
                                    </span>
                                </div>
                                <div class="table-body-item-col" style="width: 272px">
                                    <span>租期：{{ item.rentStartTime.substr(0, 10) }}至{{ item.rentEndTime.substr(0, 10) }}({{ item.rentDays }}天 共{{ item.splitNum }}期)</span>
                                    <el-tooltip class="box-item" effect="dark" placement="top-start">
                                        <template #content>
                                            <el-row :style="`width:${item.priceOfSplit.length > 3 ? 3 * 80 : item.priceOfSplit.length * 80}px`" :gutter="20">
                                                <el-col :span="item.priceOfSplit.length > 3 ? 8 : 24 / item.priceOfSplit.length" v-for="(item2, index) in item.priceOfSplit">{{ item2 }}/{{ index + 1 }}期</el-col>
                                            </el-row>
                                        </template>
                                        <span class="table-body-go">租金：¥{{ item.priceOfSplit[0] }}/1期</span>
                                    </el-tooltip>
                                    <span>总租金：¥{{ item.price || 0 }}</span>
                                    <span v-if="item.leaseMethod == 0">到期买断：¥{{ item.buyOutPrice || 0 }}</span>
                                    <span v-if="item.leaseMethod == 1">签约价：¥{{ item.marketPrice || 0 }}</span>
                                    <span>数量：1</span>
                                </div>
                                <div class="table-body-item-col" style="width: 280px">
                                    <span>商品押金：¥{{ item.deposit || 0 }}</span>
                                    <span>客户已付总押金：¥{{ item.paidDeposit || 0 }}</span>
                                    <span>支付宝免押额度：¥{{ item.freeDeposit || 0 }}</span>
                                    <span>支付宝已冻结押金：¥{{ item.freezeDeposit || 0 }}</span>
                                    <span>押金转支付金额：¥ {{ item.depositToPay || 0 }}</span>
                                    <span>支付宝已解冻押金：¥ {{ item.unfreezeDeposit || 0 }}</span>
                                    <span v-if="item.reduceDeposit">商家减免押金：¥ {{ item.reduceDeposit || 0 }}</span>
                                    <span v-if="item.state == 16 || item.state == 12 || item.state == 2 || item.state == 3 || item.state == 6 || item.state == 15">已退还押金：¥ {{ item.refundDeposit ? item.refundDeposit : 0 }}</span>
                                </div>
                                <div class="table-body-item-col" style="width: 190px; word-break: break-all">
                                    <!-- <span>支付流水号：{{ item.alipayTradeNo }}</span> -->
                                    <span style="width: auto" v-if="premission.payDetail">
                                        <span class="table-body-go" style="padding: 0" @click="moneyRef.open(item, 1)">已支付：</span>
                                        ¥{{ item.payPrice || '0.00' }}
                                    </span>
                                    <span style="width: auto" v-if="premission.rentDetail && item.state != '2' && item.state != '3' && item.state != '5' && item.state != '6' && item.state != '15'" class="table-body-go" @click="moneyRef.open(item, 2)">还租详情</span>
                                </div>
                                <div class="table-body-item-col" style="width: 240px">
                                    <span>联系人：{{ item.receiverName }}</span>
                                    <span>手机号：{{ item.receiverPhone }}</span>
                                    <span>地址：{{ item.receiverAddress }}</span>
                                </div>
                                <div class="table-body-item-col" style="width: 150px">
                                    <el-tag style="width: auto" type="warning">
                                        {{ common.getValueByKey('value', item.state, searchs[3].oldData, 'label') }}
                                    </el-tag>
                                    <span style="width: auto">/</span>
                                    <el-tag style="width: auto" type="warning">
                                        {{ common.getValueByKey('value', item.leaseMethod, searchs[5].data, 'label') }}
                                    </el-tag>
                                    <!-- <span
                                    v-if="item.state != '17' && item.orderMessage"
                                    style="width: auto"
                                >
                                    /
                                </span>
                                <el-tag
                                    v-if="item.state != '17' && item.orderMessage"
                                    style="width: auto"
                                    type="danger"
                                >
                                    {{ item.orderMessage }}
                                </el-tag> -->
                                    <span v-if="item.state == '17' && typeof item.overDueDay == 'number'" style="width: auto">/</span>
                                    <!-- <el-tooltip
                                    class="box-item"
                                    effect="light"
                                    :content="item.orderMessage"
                                    :disabled="!item.orderMessage"
                                    placement="bottom"
                                > -->
                                    <el-tag v-if="item.state == '17'" style="width: auto" type="danger">逾期{{ item.overdueDay }}天</el-tag>
                                    <!-- </el-tooltip> -->
                                    <!-- <span style="width: auto" v-if="item.state == '17' && item.orderMessage">/</span>
                                <span class="overText" v-if="item.state == '17'">{{item.orderMessage}}</span> -->
                                </div>

                                <!-- <div class="table-body-item-col" style="width: 240px">
                                <span v-if="item.state == '17'">逾期开始日期：{{ item.overDueStartTime }}</span>
                                <span v-if="item.state == '17'">逾期总金额：¥{{ item.totalOverduePrice * 1}}</span>
                                <span v-if="item.state == '17'">逾期租金：¥{{ item.overPrice * 1 }}</span>
                                <span v-if="item.state == '17'">逾期滞纳金：¥{{ item.overDuePrice * 1 }}</span>
                            </div> -->
                                <div class="table-body-item-col" style="width: 128px; padding-left: 0px">
                                    <!-- <span class="table-body-go">交付确认单</span> -->
                                    <span style="width: auto" v-if="premission.view" @click="detailRef.open(item)" class="table-body-go">详情</span>
                                    <span style="width: auto" v-if="premission.check && item.state == 14" @click="checkOrder(item, '7', '审核通过')" class="table-body-go">审核通过</span>
                                    <span style="width: auto" v-if="premission.cancel && item.state == 14" @click="cancelRow(item, '2')" class="table-body-go">审核不通过</span>
                                    <span style="width: auto" v-if="premission.deliver && item.state == 7" @click="deliverRef.open(item, 1)" class="table-body-go">确认发货</span>
                                    <span style="width: auto" v-if="premission.modifyLogistic && item.state == 8" @click="deliverRef.open(item, 0)" class="table-body-go">修改物流单号</span>
                                    <span style="width: auto" v-if="premission.modifyAddress && item.state == '7'" @click="addressRef.open(item)" class="table-body-go">修改收货地址</span>
                                    <span style="width: auto" v-if="premission.wuliu && item.state == '8'" @click="deliverRef.open(item, 2)" class="table-body-go">查看物流</span>
                                    <span style="width: auto" v-if="(premission.confirm && item.state == 8) || item.state == 9 || (premission.confirm && item.state == 17)" @click="confirmRepayment(item)" class="table-body-go">商户确认还款</span>
                                    <span style="width: auto" v-if="premission.confirm && item.state == 10" @click="finishRow(item)" class="table-body-go">完结订单</span>
                                    <span style="width: auto" v-if="(premission.cancel && item.state == 7) || (premission.cancel && item.state == 8) || (premission.cancel && item.state == 14)" @click="cancelRow(item, '1')" class="table-body-go">取消订单</span>
                                    <span style="width: auto" v-if="premission.oldAttachment" @click="oldShowRisk(item)" class="table-body-go">风控查询</span>
                                    <span style="width: auto" v-if="premission.getRisk" @click="showRisk(item)" class="table-body-go">新风控查询</span>
                                    <!-- <span style="width: auto" v-if="premission.edit && item.state == 10" @click="settleRef.open({ orderId: item.id, detailType: 'settle' })" class="table-body-go">出具结算单</span> -->
                                    <!-- <span style="width: auto" @click="settleRef.open({ orderId: item.id, detailType: 'settle' })" class="table-body-go">出具结算单</span> -->
                                    <span
                                        v-if="premission.deduct && item.state == 17"
                                        style="width: auto"
                                        @click="
                                            deductDepRef.open({
                                                totalOverduePrice: item.totalOverduePrice,
                                                orderId: item.orderId,
                                                leaseMethod: item.leaseMethod,
                                                overPrice: item.overPrice,
                                                overDuePrice: item.overduePrice,
                                                buyOutPrice: item.buyOutPrice,
                                                outOfRent: item.outOfRent,
                                            })
                                        "
                                        class="table-body-go"
                                    >
                                        申请扣除押金
                                    </span>
                                    <span
                                        v-if="(premission.orderover && item.state == 17 && item.overduePrice > 0) || (premission.deposit && item.viewReduceDeposit)"
                                        style="width: auto"
                                        @click="
                                            deductionAmountRef.open({
                                                orderId: item.orderId,
                                                type: item.state == 17 ? 1 : 2,
                                                freeDeposit: item.freezeDeposit,
                                                deposit: item.deposit,
                                                overDuePrice: item.overduePrice,
                                                maximumDepositFree: item.maximumDepositFree,
                                            })
                                        "
                                        class="table-body-go"
                                    >
                                        {{ item.state == 17 ? '减免滞纳金' : '减免押金' }}
                                    </span>
                                    <span v-if="item.viewRefund" style="width: auto" @click="refundOfRent(item)" class="table-body-go">退还押金</span>
                                    <span v-if="item.viewUnfreeze" style="width: auto" @click="zfbThaw(item)" class="table-body-go">支付宝解冻</span>
                                    <span class="table-body-go" style="width: auto" @click="dailyRcordRef.open({ orderId: item.orderId })">日志</span>
                                    <!-- <el-tooltip v-if="premission.cancel && item.state != 15 && item.state != 3" effect="dark" content="取消订单"
                                    placement="top" :enterable="false">
                                    <el-button class="icon_button" type="danger" plain circle :icon="Close" size="small" @click="cancelRow(item)"></el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.edit && item.state == 10" effect="dark" content="出具结算单" placement="top"
                                    :enterable="false">
                                    <el-button class="icon_button" type="primary" circle :icon="Tickets" size="small"
                                        @click="settleRef.open({orderId: item.id, detailType: 'settle'})"></el-button>
                                </el-tooltip> -->
                                </div>
                            </div>
                            <div class="table-body-order">
                                <span>订单编号：{{ item.orderId }}</span>
                                <span>下单时间：{{ item.createTime }}</span>
                                <span>
                                    商家名称：{{ item.companyName }}
                                    <!--  common.getValueByKey(
                                                                                                                                                'code',
                                         item.companyCode,
                                         searchs[7].data,
                                         'label'
                                     ) -->
                                </span>
                                <span v-if="item.channelCode">来自渠道：{{ common.getValueByKey('channelCode', item.channelCode, suggestionsList, 'channelName') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </page-wrapper>
        <div>
            <detail ref="detailRef" :statuss="searchs[3].oldData" :sonStatuss="searchs[3].sonStatuss" :yesNo="yesNo" :expressMethods="expressMethods" :expressCompanys="expressCompanys" :newOrOldData="newOrOldData"/>
            <risk-control ref="riskRef" />
            <new-risk-control ref="newRiskRef" />
            <address-com ref="addressRef" @refresh="() => pageRef.refresh(true)" />
            <settle ref="settleRef" @refresh="() => pageRef.refresh(true)" />
            <deliver ref="deliverRef" :expressCompanys="expressCompanys" @refresh="() => pageRef.refresh(true)" />
            <money ref="moneyRef" @refresh="() => pageRef.refresh(true)" />
            <el-dialog v-model="visible.show" title="风控查询" width="50%">
                <div class="item">
                    <div class="box-red">
                        <span class="font-red">视成报告</span>
                        <el-popconfirm width="300px" title="您确定要查询视成报告数据吗？点击确定后平台将从您的风控账户中收取费用" @confirm="confirmEvent(1)">
                            <template #reference>
                                <el-button class="button-red" type="primary" @click="dialogVisible = false">确认查询</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                    <div>
                        <span>查看视成报告的收费标准为：{{ moneyData.seeRisk }}元/次，从商家的风控账户中扣取。24小时内查询同一用户数据只收费一次。查询风控报告成功后收费，没有查询到风控数据不扣费。</span>
                    </div>
                </div>
                <div class="item" style="border: 0">
                    <div class="box-red">
                        <span class="font-red">全景雷达</span>
                        <el-popconfirm width="300px" title="您确定要查询全景雷达数据吗？点击确定后平台将从您的风控账户中收取费用" @confirm="confirmEvent(2)">
                            <template #reference>
                                <el-button class="button-red" type="primary" @click="dialogVisible = false">确认查询</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                    <div>
                        <span>查看全景雷达的收费标准为：{{ moneyData.radarRisk }}元/次，从商家的风控账户中扣取。24小时内查询同一用户数据只收费一次。查询风控报告成功后收费，没有查询到风控数据不扣费。</span>
                    </div>
                </div>
                <!-- <div class="item" style="border: 0">
                <div class="box-red">
                    <span class="font-red">探针</span>
                    <el-popconfirm
                        width="300px"
                        title="您确定要查询探针数据吗？点击确定后平台将从您的风控账户中收取费用"
                        @confirm="confirmEvent(3)"
                    >
                        <template #reference>
                            <el-button
                                class="button-red"
                                type="primary"
                                @click="dialogVisible = false"
                            >
                                确认查询
                            </el-button>
                        </template>
                    </el-popconfirm>
                </div>
                <div>
                    <span>
                        查看视成报告的收费标准为：{{moneyData.probeRisk}}元/次，从商家的风控账户中扣取。24小时内查询同一用户数据只收费一次
                    </span>
                </div>
            </div> -->
            </el-dialog>
            <deductDep ref="deductDepRef" @refresh="() => pageRef.refresh(true)" />
            <deductionAmount ref="deductionAmountRef" @refresh="() => pageRef.refresh(true)" />
            <dailyRcordMod ref="dailyRcordRef" />

          <!-- 商户还款弹框 Start -->
          <el-dialog
              v-model="confirmRepaymentReactive.dialogShow"
              title="商户确认还款"
              :width="450"
          >
            <div style="max-height: 300px; overflow: auto">
              <div class="flex">
                <el-radio-group
                    v-model="confirmRepaymentReactive.ridioNum"
                    class="ml-4"
                >
                  <el-radio
                      label="1"
                      size="large"
                      v-if="confirmRepaymentReactive.list.length > 0"
                  >按月还款</el-radio
                  >
                  <el-radio label="2" size="large">一次性还款</el-radio>
                </el-radio-group>
              </div>
              <div v-if="confirmRepaymentReactive.ridioNum == 1">
                <div
                    v-for="(item, index) in confirmRepaymentReactive.list"
                    :key="index"
                >
                  <div
                      class="flex"
                      style="
                    align-items: center;
                    width: 100%;
                    justify-content: space-between;
                  "
                  >
                    <p class="flex" style="flex-direction: column">
                      <span>¥{{ item.price }}/第{{ item.stagesNow }}期</span>
                      <span>交租日期: {{ item.rentDate.substr(0, 10) }}</span>
                    </p>
                    <p :style="index == 0 ? 'color:red' : ''">
                      {{ item.state == 'waitPay' ? '待支付' : '已逾期' }}
                    </p>
                  </div>

                  <template v-if="index == 0">
                    <el-input-number
                        v-model="confirmRepaymentReactive.from.amount"
                        :min="0.01"
                        controls-position="right"
                        style="width: 50%"
                        placeholder="请输入金额"
                    />
                  </template>
                </div>
              </div>
              <div v-else>
                <div
                    class="flex"
                    style="align-items: center; justify-content: space-between"
                >
                  <p class="flex" style="flex-direction: column">
                  <span
                  >租期:
                    {{
                      confirmRepaymentReactive.info.rentStartTime.substr(0, 10)
                    }}
                    -
                    {{
                      confirmRepaymentReactive.info.rentEndTime.substr(0, 10)
                    }}</span
                  >
                    <span>总租金: {{ confirmRepaymentReactive.info.price }}</span>
                    <span
                    >买断金:
                    {{ confirmRepaymentReactive.info.buyOutPrice }}</span
                    >
                  </p>
                  <p style="color: red">待支付</p>
                </div>
              </div>
            </div>
            <template #footer>
            <span class="dialog-footer">
              <el-button @click="confirmRepaymentReactive.dialogShow = false"
              >取消</el-button
              >
              <el-button type="primary" @click="confirmRepaymentSubmit"
              >确定</el-button
              >
            </span>
            </template>
          </el-dialog>
          <!-- 商户还款弹框 End -->

        </div>
    </section>
</template>
<style lang="scss" scoped>
// :deep(.el-button + .el-button) {
//     // margin-left: 10px;
// }
:deep(.el-button--small) {
    margin: 0;
    margin-bottom: 2px;
}

.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.table-title {
    width: 100%;
    height: 70px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-title-item {
        font-size: 15px;
        text-align: center;
        justify-content: space-between;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #202741;
    }
}

.table-main {
    // display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;

    .table-body {
        width: 100%;
        // min-height: 230px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;

        .table-body-go {
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #e47633;
            cursor: pointer;
        }

        .table-body-item {
            display: flex;
            // align-items: center;
            justify-content: space-between;
            min-width: 50px;
            font-size: 15px;
            text-align: center;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #202741;
            // height: 164px;
            background: #ffffff;
            font-size: 14px;
            padding: 10px 0;

            div {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                // height: 100%;
                border-left: 1px solid #f4f4f4;
                box-sizing: border-box;
            }

            .table-body-item-col {
                flex-direction: column;
                width: 100%;
                box-sizing: border-box;

                img {
                    width: 90px;
                    max-height: 90px;
                    // height: 120px;
                }

                span {
                    margin-bottom: 3px;
                    width: 100%;
                    padding: 0 10%;
                    box-sizing: border-box;
                }
            }
        }

        .table-body-order {
            width: 100%;
            height: 30px;
            line-height: 30px;
            background: #fff9f5;
            padding-left: 20px;
            box-sizing: border-box;

            span {
                display: inline-block;
                margin-right: 50px;
            }
        }
    }
}

.main-white {
    background: #f1f3f6;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.listBody {
    overflow: hidden;
    /* height: 63vh; */
    height: 100%;
    display: flex;
    flex-direction: column;
}
.search-box {
    width: 100%;
    padding: 20px;
    background: #ffffff;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.item {
    padding: 27px 0 30px;
    border-bottom: 1px solid #ebebeb;
    margin: 0 83px;
    box-sizing: border-box;

    .box-red {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 16px;

        .font-red {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ff554b;
        }

        .button-red {
            width: 140px;
            height: 36px;
            background: #ff554b;
            border-radius: 2px;
        }
    }
}

.overText {
    font-size: 12px;
}
</style>
